<!--添加功能封装-->
<template>
  <div style="margin-bottom: 10px;">
    <a-button type="primary" style="margin-right: 24px" @click="showModal">添加</a-button>
    <a-modal v-model:open="open" title="添加" :confirm-loading="confirmLoading" @ok="handleOk">
      <a-form :model="formState" :label-col="{ span: 4 }">
        <div v-for="{ title, dataIndex,type } in columns">
          <a-form-item :label="title">
            <div v-if="slots[`${dataIndex}` ?? ``]">
              <slot :name="dataIndex"></slot>
            </div>
            <a-checkbox v-else-if="type==='checkBox'"></a-checkbox>
            <a-input v-model:value="formState[dataIndex]" v-else></a-input>
          </a-form-item>
        </div>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import {message} from "ant-design-vue";
import { post } from "@/madoka/request";
import { sleep } from "@/madoka";
const slots = defineSlots()
const props = defineProps({
  url:{
    default:''
  },
  columns:{
    default:()=>([] as any[])
  },
})
const emits = defineEmits(["insert"])
let open = ref(false);

const showModal = () => {
  open.value = true;
};
/**
 * 新增数据
 */
let formState = ref<any>({});
let confirmLoading = ref(false);


const handleOk = async () => {
  post(props.url, formState.value).then((res:any) => {
    message.success(res.msg)
    emits("insert")
  });
  confirmLoading.value = true;
  await sleep(500);
  open.value = false;
  confirmLoading.value = false;
};

</script>